<template>
    <div class="footer">
        <div class="wrapper">
            <div class="left-block">
                <div class="nav">
                    <ul class="clearfix">
                        <li><a href="javascript:;">首页</a></li>
                        <li><a href="javascript:;">法律法规</a></li>
                        <li><a href="javascript:;">问与答</a></li>
                        <li><a href="javascript:;">术语学习</a></li>
                        <li><a href="javascript:;">新闻资讯</a></li>
                        <li><a href="javascript:;">业务服务</a></li>
                        <li><a href="javascript:;">数据库</a></li>
                        <li><a href="javascript:;">关于我们</a></li>
                    </ul>
                </div>
                <div class="contact">
                    <ol>
                        <li class="addr">广州市白云区机场路1630号白云时光大厦1137室</li>
                        <li class="mobile">13316058009</li>
                        <li class="wechat">fairy4802004</li>
                        <li class="qq">3137597228</li>
                    </ol>
                </div>
            </div>
            <div class="right-block clearfix">
                <div class="le">
                    <img src="../assets/images/icon/qrcode.png" height="170" width="170" alt="" />
                </div>
                <div class="ri">
                        <img src="../assets/images/icon/name.png" height="53" width="250" alt="" />
                    
                        <img src="../assets/images/icon/reg.png" height="40" width="250" alt="" />
                    
                        <img src="../assets/images/icon/web.png" height="28" width="253" alt="" />
                    
                </div>
            </div>
        </div>
    </div>
</template>
<style type="text/css" scoped>
    .footer{ background:#333;}
    .wrapper{ width:1200px; margin:0 auto; position: relative; overflow: hidden; padding-top: 35px;}
    .left-block,.right-block{float: left;}
    .nav,.contact{ margin-left: 30px;}
    .nav{ margin-right:30px;}
    .nav ul li{ float: left; margin-right: 35px;}
    .nav ul li:last-of-type{ margin:0;}
    .nav ul li a{ display:block; color:#fff; line-height: 22px;}
    .nav ul li a:hover{ color:#ccc;}
    .contact{ margin-top:36px;}
    .contact li{ color:#fff; margin-bottom: 18px; padding-left: 33px; line-height: 24px;}
    .addr{ background:url('../assets/images/icon/location.png') no-repeat 0 center; background-size:24px 24px;}
    .mobile{ background:url('../assets/images/icon/phone.png') no-repeat 0 center; background-size:24px 24px;}
    .wechat{ background:url('../assets/images/icon/wechat.png') no-repeat 0 center; background-size:24px 24px;}
    .qq{ background:url('../assets/images/icon/QQ.png') no-repeat 0 center; background-size:24px 24px;}
    .le,.ri{ float: left;}
    .ri{ height:170px; margin-left: 15px; display:flex;flex-direction:column; justify-content: space-between;}
    .ri img{ display:block;}
    @media (max-width:1024px){
        .wrapper{ width:auto;}
        .left-block,.right-block{float: none;}
        .nav,.contact{ margin-left:0;}
        .nav ul,.contact ol,.right-block{ display:flex; justify-content:center;}
        .contact li:not(:last-of-type){ margin-right:15px;}
    }
    @media (max-width:768px){
        .nav ul,.contact ol,.right-block{ display:block;}
        .wrapper{ padding:15px;}
        .le{ margin:0 auto; width:170px; float:none;}
        .ri{ display:block; float:none;}
        .ri img{ margin: 10px auto;}
    }
</style>